<template>
<div >
<h1  align="left">宠物信息:</h1>
<el-form style="margin-top: 15px; " :inline="true">
    <el-form-item style="width: 30%; margin-left:-71.5%">
  <el-input placeholder="请输入内容" v-model="input1" class="input-with-select" :inline="true">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="昵称" value="1"></el-option>
      <el-option label="名字" value="2"></el-option>
      <el-option label="品种" value="3"></el-option>
       <el-option label="种类" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search" >搜索</el-button>
  </el-input>
    </el-form-item>
  <el-form-item>
  <el-button style="margin-left:420%">添加宠物</el-button>
  </el-form-item>
</el-form>
<div>
  <el-table
    :data="tableData"
    border
    style="width: 60%">
    <el-table-column
      prop="name"
      label="名字"
      width="180">
    </el-table-column>
    <el-table-column
     prop="variety"
     label="品类"
     width="180">
    </el-table-column>
    <el-table-column
      prop="type"
      label="种类"
      width="180">
    </el-table-column>
    <el-table-column
       prop="colour"
       label="颜色"
       width="180">
    </el-table-column>
    <el-table-column
     prop="time"
     label="出生日期"
     width="180">
     </el-table-column>
    <el-table-column
      prop="property"
      label="性格">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small">修改</el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
</el-table-column>
  </el-table>

  <el-pagination
 background
 layout="prev, pager, next"
:page-size="20"
:total="1000"   
 style="margin-left:-50%"
>
</el-pagination>
<el-button>返回</el-button>
</div>

  </div>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
      input1: '',
      select: ''
      }
    }
  }
</script>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>